<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="layui/css/layui.css" media="all">
    <link rel="stylesheet" href="layui/dtree/dtree.css" media="all">
     <link rel="stylesheet" href="layui/dtree/font/iconfont.css" media="all">
    <style>

</style>
</head>
<body>
 <ul id="demoTree1" class="dtree" data-id="0"></ul>
    <script src="layui/layui.js"></script>
    <script>
     var data=[{
id: "0",
parentId: "-1",
title: "最高级",
isLast: false,
iconClass: null,
spread: false,
basicData: null,
checkArr: [
{
type: "0",
isChecked: "0"
}
],
children: [
{
id: "36",
parentId: "0",
title: "媒体管理",
isLast: false,
iconClass: null,
spread: false,
basicData: null,
checkArr: [
{
type: "0",
isChecked: "0"
}
],
children: [
{
id: "37",
parentId: "36",
title: "视频",
isLast: true,
iconClass: null,
spread: false,
basicData: null,
checkArr: [
{
type: "0",
isChecked: "0"
}
],
children: [ ]
},
{
id: "38",
parentId: "36",
title: "音频",
level: null,
isLast: true,
iconClass: null,
spread: false,
basicData: null,
checkArr: [
{
type: "0",
isChecked: "0"
}
],
children: [ ]
},
{
id: "39",
parentId: "36",
title: "图片",
level: null,
isLast: true,
iconClass: null,
spread: false,
basicData: null,
checkArr: [
{
type: "0",
isChecked: "0"
}
],
children: [ ]
}
]
},
{
id: "40",
parentId: "0",
title: "审核管理",
level: null,
isLast: false,
iconClass: null,
spread: false,
basicData: null,
checkArr: [
{
type: "0",
isChecked: "0"
}
],
children: [
{
id: "41",
parentId: "40",
title: "审核列表",
level: null,
isLast: true,
iconClass: null,
spread: false,
basicData: null,
checkArr: [
{
type: "0",
isChecked: "0"
}
],
children: [ ]
}
]
},
{
id: "42",
parentId: "0",
title: "监控统计",
level: null,
isLast: false,
iconClass: null,
spread: false,
basicData: null,
checkArr: [
{
type: "0",
isChecked: "0"
}
],
children: [
{
id: "55",
parentId: "42",
title: "统计分析",
level: null,
isLast: true,
iconClass: null,
spread: false,
basicData: null,
checkArr: [
{
type: "0",
isChecked: "0"
}
],
children: [ ]
}
]
},
{
id: "44",
parentId: "0",
title: "全局设置",
level: null,
isLast: false,
iconClass: null,
spread: false,
basicData: null,
checkArr: [
{
type: "0",
isChecked: "0"
}
],
children: [
{
id: "53",
parentId: "44",
title: "目录管理",
level: null,
isLast: true,
iconClass: null,
spread: false,
basicData: null,
checkArr: [
{
type: "0",
isChecked: "0"
}
],
children: [ ]
}
]
},
{
id: "46",
parentId: "0",
title: "系统管理",
level: null,
isLast: false,
iconClass: null,
spread: false,
basicData: null,
checkArr: [
{
type: "0",
isChecked: "0"
}
],
children: [
{
id: "47",
parentId: "46",
title: "用户管理",
level: null,
isLast: true,
iconClass: null,
spread: false,
basicData: null,
checkArr: [
{
type: "0",
isChecked: "0"
}
],
children: [ ]
},
{
id: "48",
parentId: "46",
title: "角色管理",
level: null,
isLast: true,
iconClass: null,
spread: false,
basicData: null,
checkArr: [
{
type: "0",
isChecked: "0"
}
],
children: [ ]
},
{
id: "49",
parentId: "46",
title: "菜单管理",
level: null,
isLast: true,
iconClass: null,
spread: false,
basicData: null,
checkArr: [
{
type: "0",
isChecked: "0"
}
],
children: [ ]
},
{
id: "50",
parentId: "46",
title: "系统参数",
level: null,
isLast: true,
iconClass: null,
spread: false,
basicData: null,
checkArr: [
{
type: "0",
isChecked: "0"
}
],
children: [ ]
},
{
id: "51",
parentId: "46",
title: "日志追踪",
level: null,
isLast: true,
iconClass: null,
spread: false,
basicData: null,
checkArr: [
{
type: "0",
isChecked: "0"
}
],
children: [ ]
}
]
},
{
id: "56",
parentId: "0",
title: "阿里云",
level: null,
isLast: true,
iconClass: null,
spread: false,
basicData: null,
checkArr: [
{
type: "0",
isChecked: "0"
}
],
children: [ ]
}
]
}];

layui.config({
  base: 'layui/lay/modules/' //配置 layui 第三方扩展组件存放的基础目录
}).extend({
  dtree: 'dtree' //定义该组件模块名
}).use(['element','layer', 'dtree'], function(){
    var layer = layui.layer;
    var dtree = layui.dtree;
    var  $ = layui.$;
        
   var DemoTree=dtree.render({
      elem: "#demoTree1",  //绑定元素
      //url: "../demoTree1.json"  //异步接口
      data:data,
      checkbar: true  //开启复选框
    });
   // DemoTree.menubarMethod().closeAllNode();
console.log(dtree.version())
        //单击节点 监听事件
        dtree.on("node('demoTree1')" ,function(param){
        
        });
});

</script>

</body>
</html>